<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户详情页</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <p style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px"><span style="font-size: 20px">基础资料</span></p>
            <el-row :gutter="20">
              <el-descriptions >
                <el-descriptions-item label="用户名" >{{this.userList.username}}</el-descriptions-item>
                <el-descriptions-item label="手机号" >{{this.userList.tel}}</el-descriptions-item>
                <el-descriptions-item label="用户性别" >{{this.detailsList[0].gender}}</el-descriptions-item>
                <el-descriptions-item label="用户年龄" >{{this.detailsList[0].age}}</el-descriptions-item>
                <el-descriptions-item label="微信号" >{{this.detailsList[0].vx}}</el-descriptions-item>
                <el-descriptions-item label="用户职业" >{{this.detailsList[0].occupation}}</el-descriptions-item>
                <el-descriptions-item label="默认收货人" >{{this.detailsList[0].consignee}}</el-descriptions-item>
                <el-descriptions-item label="详细地址" >{{this.detailsList[0].address}}</el-descriptions-item>
                <el-descriptions-item label="来源方式">{{this.detailsList[0].source}}</el-descriptions-item>
                <el-descriptions-item label="注册时间">{{this.userList.inserttime}}</el-descriptions-item>
                <el-descriptions-item label="最近登录时间">{{this.detailsList[0].loginTime}}</el-descriptions-item>
                <el-descriptions-item label="备注">{{this.detailsList[0].beiZhu}}</el-descriptions-item>
              </el-descriptions>
            </el-row>
        </el-card>
      <div style="margin-top: 20px">
      <el-card>
        <p style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px" >
          <span style="font-size: 20px">用户标签</span>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#"  @click="showEditLabelDialog()">编辑标签</a></p>
        <el-row :gutter="20" style="text-align: left">
          <el-tag v-for="iteam in this.userList.labels" size="medium" style="margin: 5px">{{iteam.labername}}</el-tag>
        </el-row>
      </el-card>
      </div>


      <div style="margin-top: 20px">
        <el-card>
          <p style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px" >
            <span style="font-size: 20px">用户资产</span></p>
          <el-descriptions class="margin-top"  :column="4" direction="vertical">
            <el-descriptions-item label="累计积分">{{this.jifen}}</el-descriptions-item>
            <el-descriptions-item label="累计成长值">{{this.detailsList[0].growthValue}}</el-descriptions-item>
            <el-descriptions-item label="付费会员卡">{{this.svipName}}</el-descriptions-item>
            <el-descriptions-item label="会员等级">{{this.userList.member.membername}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>

      <div style="margin-top: 20px">
        <el-card>
          <p style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px" >
            <span style="font-size: 20px">行为统计</span></p>
          <el-descriptions class="margin-top"  :column="4" direction="vertical">
            <el-descriptions-item label="下单数量">{{this.userBehavior[0].orderQuantity}}</el-descriptions-item>
            <el-descriptions-item label="下单金额(元)">{{this.userBehavior[0].orderAmount}}</el-descriptions-item>
            <el-descriptions-item label="最近消费时间">{{this.userBehavior[0].lastConsumptionTime}}</el-descriptions-item>
            <el-descriptions-item label="今日学习时长(h)">{{this.userBehavior[0].learningTimeToday}}</el-descriptions-item>
            <el-descriptions-item label="学习总时长(h)">{{this.userBehavior[0].learningTime}}</el-descriptions-item>
            <el-descriptions-item label="学习总课程数量">{{this.userBehavior[0].learningCourseQuantity}}</el-descriptions-item>
            <el-descriptions-item label="完成总课程量">{{this.userBehavior[0].coursesCompletedNumber}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>

      <div style="margin-top: 20px">
        <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="订单记录" name="first">
            <el-table :data="orders" stripe>
              <el-table-column label="订单编号" prop="ordernum" width="200px"></el-table-column>
              <el-table-column label="用户信息" width="150px">
                <template slot-scope="scope">
                  {{scope.row.user.username}}<br>
                  {{scope.row.user.tel}}
                </template>
              </el-table-column>
              <el-table-column label="订单来源" width="100px">
                <template slot-scope="sc">{{sc.row.source==1?'APP':'线下实体店'}}</template>
              </el-table-column>
              <el-table-column label="订单状态" width="100px" >
                <template slot-scope="sc">
                  <span v-if="sc.row.orderStatus == 1">已完成</span>
                  <span v-if="sc.row.orderStatus == 2">已发货</span>
                  <span v-if="sc.row.orderStatus == 3">待发货</span>
                  <span v-if="sc.row.orderStatus == 4">待付款</span>
                </template>
              </el-table-column>
              <el-table-column label="支付方式" width="100px" >
                <template slot-scope="sc">
                  <span v-if="sc.row.paymethod == 1">微信支付</span>
                  <span v-if="sc.row.paymethod  == 2">支付宝支付</span>
                  <span v-if="sc.row.paymethod  == 3">银行卡支付</span>
                </template>
              </el-table-column>
              <el-table-column label="实付金额" prop="pricenew" width="120px"></el-table-column>
              <el-table-column label="下单时间" prop="gmtcreate" width="200px"></el-table-column>
              <el-table-column label="操作" >
                <template slot-scope="scope">
                  <el-button type="text"  @click="goOrderDetails(scope.row)">订单详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                @size-change="orderSizeChange"
                @current-change="orderCurrentChange"
                :current-page="orderPageNum"
                :page-sizes="[5, 10 , 15, 20]"
                :page-size="orderPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="orderTotal"
            ></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="积分记录" name="second">
            <!--积分记录-->
            <el-table :data="integralList" border stripe empty-text="还不是付费会员">
              <el-table-column label="操作时间" prop="operationTime"></el-table-column>
              <el-table-column label="操作前积分" prop="operationBefore" ></el-table-column>
              <el-table-column label="操作改变的值"  prop="changeValue" ></el-table-column>
              <el-table-column label="操作后积分" prop="operationLast" ></el-table-column>
              <el-table-column label="积分原因" prop="changeReason" ></el-table-column>
              <el-table-column label="备注" prop="beiZhu"></el-table-column>
            </el-table>
            <el-pagination
                @size-change="integralSizeChange"
                @current-change="integralCurrentChange"
                :current-page="integralPageNum"
                :page-sizes="[5, 10 , 15, 20]"
                :page-size="integralPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="integralTotal"
            ></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="成长值记录" name="third">
            <!--成长值记录-->
            <el-table :data="growthValueList" border stripe>
              <el-table-column label="操作时间" prop="operationTime"></el-table-column>
              <el-table-column label="操作前成长值" prop="operationBefore" ></el-table-column>
              <el-table-column label="操作改变的值"  prop="changeValue" ></el-table-column>
              <el-table-column label="操作后成长值" prop="operationLast" ></el-table-column>
              <el-table-column label="成长值原因" prop="changeReason" ></el-table-column>
              <el-table-column label="备注" prop="beiZhu"></el-table-column>
            </el-table>
            <el-pagination
                @size-change="growthValueSizeChange"
                @current-change="growthValueCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10 , 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="优惠券" name="fourth">
            <el-table :data="couponRecordList" border stripe >
              <el-table-column label="操作时间" prop="operationTime"></el-table-column>
              <el-table-column label="优惠券名称" prop="coupon.couponname" ></el-table-column>
              <el-table-column label="面值(元)"  prop="coupon.reduce" ></el-table-column>
              <el-table-column label="获取渠道" prop="accessChannel" ></el-table-column>
              <el-table-column label="使用状态" prop="useStatus" ></el-table-column>
              <el-table-column label="操作备注" prop="operationRemarks"></el-table-column>
            </el-table>
            <el-pagination
                @size-change="couponSizeChange"
                @current-change="couponCurrentChange"
                :current-page="integralPageNum"
                :page-sizes="[5, 10 , 15, 20]"
                :page-size="integralPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="couponTotal"
            ></el-pagination>
          </el-tab-pane>
        </el-tabs>
        </el-card>

      </div>




      <!--编辑标签-->
      <el-dialog title="编辑标签" :visible.sync="editLabelVisible"  width="30%" :close-on-click-modal="false" @close="editLabelFormClose">
        <p style="font-size: 16px;border-bottom: 1px solid gainsboro;text-align: left">选择标签</p>
        <el-form :model="editLabelForm" :rules="editLabelFormRules" ref="editLabelForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户id" prop="id">
            <el-input v-model="editLabelForm.id" readonly></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="editLabelForm.username" readonly></el-input>
          </el-form-item>
          <el-form-item label="标签" prop="labelId">
            <el-select v-model="labelids" multiple placeholder="请选择标签">
              <el-option :label="item.labername" :value="item.id" v-for="item in labelList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doEditLabel">确 定</el-button>
                <el-button @click="editLabelFormClose">关 闭</el-button>
            </span>
      </el-dialog>

    </div>

</template>
<script>
    export default {
        data() {
            return {
              pageNum: 1,
              pageSize: 5,
              total:0,
              integralPageNum:1,
              integralPageSize:5,
              integralTotal:0,
              couponPageNum:1,
              couponPageSize:5,
              couponTotal:0,
              orderPageNum:1,
              orderPageSize:5,
              orderTotal:0,

              userList:[],
              detailsList:[],
              userSvipList:[],//该用户拥有的付费会员信息
              growthValueList:[],
              integralList:[],
              orders:[],//该用户的订单记录
              couponRecordList:[],
              jifen:"",
              svipName:"",
              userBehavior:[],
              editLabelVisible:false,
              labelids:[],
              labelList:[],
              activeName:"first",
              editLabelForm: {
                id: "",
                username: "",
                labelId: []
              },
              editLabelFormRules:{
              }

            };
        },
        methods: {
          goOrderDetails(row){
            let url = "order/queryOrderDetail"
            this.$axios.get(url,{
              params:{
                id:row.id,
                isCommodity:row.isCommodity
              }
            }).then(res=>{
              if (res.data.code == 101){
                let orderDetailList = res.data.data
                this.$router.push({
                  path:"/OrderDetail/",
                  query:{
                    order:row,
                    orderDetailList:orderDetailList
                  }
                })
              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })

          },
          orderSizeChange(newSize){
            this.orderPageSize=newSize;
            this.getOrderRecord();
          },
          orderCurrentChange(newPage){
            this.orderPageNum=newPage;
            this.getOrderRecord();
          },
          getOrderRecord(){
            let url = "order/queryOrderRecordByUid";
            this.$axios.get(url,{
              params:{
                uid:this.userList.id,
                now:this.pageNum,
                size:this.pageSize
              }
            }).then(res=>{
              if (res.data.code == 200){
                this.orders = res.data.data.list;
                this.orderPageNum = res.data.data.pageNum;
                this.orderPageSize = res.data.data.pageSize;
                this.orderTotal = res.data.data.total;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },
          couponSizeChange(newSize){
            this.couponPageSize = newSize;
            this.getCouponRecord();
          },
          couponCurrentChange(newPage){
            this.couponPageNum = newPage;
            this.getCouponRecord();
          },
          getCouponRecord(){
            let url = "tuser/queryUserCouponRecord";
            this.$axios.get(url, {
              params: {
                uid: this.userList.id,
                now:this.couponPageNum,
                size:this.couponPageSize
              }
            }).then(res => {
              if (res.data.code == 200) {
                this.couponRecordList = res.data.data.list;
                this.couponPageNum= res.data.data.pageNum;
                this.couponPageSize = res.data.data.pageSize;
                this.couponTotal = res.data.data.total;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            });

          },
          integralSizeChange(newSize){
            this.integralPageSize = newSize;
            this.getIntegralRecord();
          },
          integralCurrentChange(newPage) {
            this.integralPageNum = newPage;
            this.getIntegralRecord();
          },
          getIntegralRecord(){
            let url = "tuser/queryUserIntegralRecord";
            this.$axios.get(url, {
              params: {
                uid: this.userList.id,
                now:this.integralPageNum,
                size:this.integralPageSize
              }
            }).then(res => {
              if (res.data.code == 200) {
                this.integralList = res.data.data.list;
                this.integralPageNum = res.data.data.pageNum;
                this.integralPageSize = res.data.data.pageSize;
                this.integralTotal = res.data.data.total;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            });

          },

          growthValueSizeChange(newSize) {
            this.pageSize = newSize;
            this.getGrowthValueRecord();
          },
          growthValueCurrentChange(newPage) {
            this.pageNum = newPage;
            this.getGrowthValueRecord();
          },
          handleClick(tab, event) {
            console.log(tab, event);
          },
          //分页查询
         getGrowthValueRecord(){
           let url = "tuser/queryUserGrowthValueRecord";
           this.$axios.get(url, {
             params: {
               uid: this.userList.id,
               now:this.pageNum,
               size:this.pageSize
             }
           }).then(res => {
             if (res.data.code == 200) {
               this.growthValueList = res.data.data.list;
               this.pageNum = res.data.data.pageNum;
               this.pageSize = res.data.data.pageSize;
               this.total = res.data.data.total;
             } else {
               this.$message({
                 type: "error",
                 message: res.data.msg,
                 duration: 1000
               })
             }
           });
         },
         getUserBehavior() {
            let url = "tuser/queryUserBehavior";
            this.$axios.get(url, {
              params: {
                uid: this.userList.id
              }
            }).then(res => {
              if (res.data.code == 200) {
                this.userBehavior = res.data.data;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            });
          },
          //获得用户付费会员积分
          getUsersvip() {
              //插寻该用户的付费会员
              let url = "tuser/querySvipByUserId";
              this.$axios.get(url, {
                params: {
                  uid: this.userList.id
                }
              }).then(res => {
                if (res.data.code == 200) {
                  if(res.data.data.length>0) {
                    console.log(res)
                    this.userSvipList = res.data.data;
                    this.svipName = res.data.data[0].svip.name;
                    this.jifen = res.data.data[0].integral
                  }else {
                    this.svipName="非付费会员";
                    this.jifen=0
                  }
                } else {
                  this.$message({
                    type: "error",
                    message: res.data.msg,
                    duration: 1000
                  })
                }
              });

          },
          showEditLabelDialog() {
            this.editLabelVisible = true;
            this.editLabelForm.id = this.userList.id;
            this.editLabelForm.username = this.userList.username;
            //找到该用户拥有的标签id
            for (let i = 0; i < this.userList.labels.length; i++) {
              this.labelids.push(this.userList.labels[i].id);
            }
          },
          editLabelFormClose() {
            this.editLabelVisible = false;
            this.$refs.editLabelForm.resetFields();
            this.labelids = [];
          },//编辑标签关闭
          doEditLabel() {
            this.editLabelForm.labelId = this.labelids
            this.$refs.editLabelForm.validate(valid => {
              if (!valid) {
                return;
              }
              let url = "tuser/editLabelId";
              this.$axios.put(url, this.editLabelForm).then(res => {
                if (res.data.code == 200) {
                  this.$message({
                    type: "success",
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.getUserLabel();
                  this.$refs.editLabelForm.resetFields();
                  this.editLabelForm.labelId = [];
                  this.labelids = [];
                  this.editLabelVisible = false;
                } else {
                  this.$message({
                    type: "error",
                    message: res.data.msg,
                    duration: 1000
                  })
                }
              });
            })
          },
          //查询用户拥有的标签
          getUserLabel() {
            let url = "label/queryLabelByUserId";
            this.$axios.get(url, {
              params: {
                uid: this.userList.id
              }
            }).then(res => {
              if (res.data.code == 200) {
                this.userList.labels = res.data.data;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            });
          },
          getLabelList() {
            let url = "label/queryLabelName";
            this.$axios.get(url).then(res => {
              if (res.data.code == 200) {
                this.labelList = res.data.data;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            });
          },
          reloadData() {
            this.getLabelList();
            this.getUsersvip();
            this.getUserBehavior();
            this.getGrowthValueRecord();
            this.getIntegralRecord();
            this.getCouponRecord();
            this.getOrderRecord();
          }
        },
        created() {
          this.userList=this.$route.query.user
          this.detailsList=this.$route.query.userDetails
          this.reloadData();
        }
    };
</script>


<style lang="less" scoped>

</style>